<template>
  <div class="page-combo-detail">
    <Breadcrumb separator=">">
      <BreadcrumbItem to="/">首页</BreadcrumbItem>
      <BreadcrumbItem to="/course-combo">套餐</BreadcrumbItem>
      <BreadcrumbItem>{{ course_combo.comboName }}</BreadcrumbItem>
    </Breadcrumb>
    <div class="combo-info">
      <div class="combo-left">
        <img v-if="course_combo.cover" :src="course_combo.cover" alt="" />
        <img v-else src="/img/pc/course-combo-bg.png" alt="" />
      </div>
      <div class="combo-right">
        <div class="combo-name">
          {{ course_combo.comboName }}
        </div>
        <div class="combo-time">
          <div class="date">
            套餐限期：{{ formatDate(course_combo.startTime, 2) }} 至
            {{ formatDate(course_combo.endTime, 2) }}
          </div>
          <div class="student">
            已有<span style="color: #ff8a8a;">{{
              course_combo.studentSum
            }}</span
            >人购买
          </div>
        </div>
        <div class="combo-desc">
          <div class="desc-title">课程简介：</div>
          <div class="desc-content">{{ course_combo.introduce }}</div>
        </div>
        <div class="price-content">
          <div class="old-price">原价：￥{{ course_combo.price }}</div>
          <div class="price-right">
            <span class="price">￥<span class="new-price">{{ course_combo.currentPrice }}</span></span>

            <div class="buy-btn" v-if="!is_had_combo" @click="buyCourseComboHandle">立即购买</div>
            <div class="buy-btn" v-else>已拥有</div>
          </div>
        </div>
      </div>
    </div>
    <div class="combo-course">
      <div class="combo-left">
        <div class="title">
          包含{{
            course_combo && course_combo.courseList
              ? course_combo.courseList.length
              : 0
          }}个课程
        </div>
        <div
          class="course"
          v-for="(item, index) in course_combo.courseList"
          :key="index"
           @click="linkTo('/coursedetail?id='+item.id)"
        >
          <div class="course-icon">
            <img :src="item.iconPath" alt="" />
          </div>
          <div class="course-info">
            <div class="course-name">{{ item.courseName }}</div>
            <div class="course-desc">{{ item.goal }}</div>
            <div class="price">原价：￥{{ item.price }}</div>
          </div>
        </div>
      </div>
      <div class="combo-right">
        <div class="hot-title">
          <div class="hot-left">热门课程</div>
          <div class="hot-right" @click="linkTo('/classify')">
            查看更多<Icon type="ios-arrow-forward" />
          </div>
        </div>
        <div class="hot-course" v-for="(item,index) in courseList" :key="index" @click="linkTo('/coursedetail?id='+item.id)">
          <img :src="item.iconPath" alt="" />
          <div class="course-name">
            {{item.courseName}}
          </div>
          <div class="teacher">
            <div class="teacher-left">
              <span>老师</span>
              <span>|</span>
              <span class="teacher-name">{{item.acName}}</span>
            </div>
            <div class="teacher-right">
              <img :src="item.avatar" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
import { getMemberInfo, getMember } from "~/api/member";
import { getCourseCombo, buyCourseCombo } from "~/api/course-combo";
import { getCourse } from "~/api/course";
export default {
  data() {
    return {
      course_combo: {},
      memberDiscount: {},
      courseList:[],
    };
  },
  created() {
    this.getData();
    this.getMemberInfo();
    this.getRecCourse();
  },
  mounted() {},
  computed: {
    ...mapState({
      token(state) {
        return state.token;
      },
      user_info(state) {
        return state.user_info;
      },
      is_loading(state) {
        return state.is_loading;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
      buy_combo_list(state) {
        return state.buy_combo_list;
      }
    }),
    comboId() {
      return this.$route.query.id;
    },
    is_had_combo() {
      let res = this.buy_combo_list.filter(
        i => i.courseComboId == this.comboId
      );
      console.log("拥有该门套餐", res);
      if (res.length > 0) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    ...mapMutations([
      "SET_IS_LOADING",
      "UPDATE_USERINFO",
      "UPDATE_BUYRECORD_LIST",
      "UPDATE_BUYCOMBO_LIST"
    ]),
    ...mapActions(["initMember", "initBuyCombo"]),
    buyCourseComboHandle(){
      if(this.token && Object.keys(this.user_info).length > 0){
        this.$Modal.confirm({
          title: this.$t("locale.pc.mycourse.coursebuy.t12"),
          content:
            this.$t("locale.pc.mycourse.coursebuy.t13") +
            this.course_combo.currentPrice +
            this.$t("locale.pc.mycourse.coursebuy.t14"),
          onOk: async () => {
            if (this.course_combo.currentPrice > this.user_info.balance) {
              this.$Modal
                .confirm({
                  title: this.$t("locale.mobile.order.t9"),
                  content:
                    this.$t("locale.mobile.order.t10") +
                    (this.course_combo.currentPrice - this.user_info.balance) +
                    this.$t("locale.mobile.order.t11"),
                  okText: this.$t("locale.mobile.order.t12"),
                  onOk: async () => {
                      this.$router.push({
                        path: "/personal?action=my_account"
                      });
                  },
                  onCancel: () => {
                    this.$Message.info("已取消");
                  }
                })
            }else{
              this.SET_IS_LOADING(true);
            let params = {
              comboId: this.course_combo.id,
              userId: this.user_info.id,
              price: this.turnString(this.course_combo.currentPrice),
              // ip: returnCitySN.cip
            };
            console.log(params);
            let result = await buyCourseCombo(params);
            if (result && result.data && result.data.code == 200) {
              console.log("购买成功",result.data.data);
              const {
                balance,
                id,
                courseComboId,
                userId,
                courseBuyRecordList
              } = result.data.data;
              let update_obj = {
                balance
              };
              this.UPDATE_USERINFO(update_obj);
              for(let i = 0;i < courseBuyRecordList.length;i++){
                  let course_update_obj = {
                    id:courseBuyRecordList[i].id,
                    courseId:courseBuyRecordList[i].courseId,
                    userId:courseBuyRecordList[i].userId,
                    deleted:courseBuyRecordList[i].deleted
                  };
                  console.log("套餐购买的课程",course_update_obj);
                  this.UPDATE_BUYRECORD_LIST(course_update_obj);
              }
              let combo_update_obj = {
                id,
                courseComboId,
                userId
              }
              this.UPDATE_BUYCOMBO_LIST(combo_update_obj);
              this.SET_IS_LOADING(false);
              this.$Message.success("购买成功！");
            } else {
              this.SET_IS_LOADING(false);
              if (result && result.data && result.data.code == 420) {
                this.$Message.error(
                  this.$t("locale.pc.mycourse.coursebuy.t16")
                );
              } else {
                this.$Message.error(
                  this.$t("locale.pc.mycourse.coursebuy.t17")
                );
              }
            }
            }
            // console.log("购买");
          },
          onCancel: () => {
            this.$Message.success(this.$t("locale.pc.mycourse.coursebuy.t18"));
          }
        });
      }else{
        this.$Modal.confirm({
          title: '提示',
          content: '您尚未登录，请先登录再购买哟！',
          onOk: async () => {
            this.$router.replace("/login");
          },
          onCancel: () => {
            this.$Message.info("已取消");
          }
        })
      }
    },
    // 路由跳转
    linkTo(path) {
      this.$router.push({
        path
      });
    },
    formatDate(time, type) {
      // console.log(time)

      var time = new Date(time);

      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      var add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      if (type === 1) {
        return y + "-" + add0(m) + "-" + add0(d);
      } else if (type === 2) {
        return (
          y +
          "-" +
          add0(m) +
          "-" +
          add0(d) +
          " " +
          add0(h) +
          ":" +
          add0(mm) +
          ":" +
          add0(s)
        );
      } else if (type === 3) {
        return add0(h) + ":" + add0(mm) + ":" + add0(s);
      }
    },
    turnString(num) {
      var re = /^[0-9]+$/;
      var re2 = /^[0-9]+(\.[0-9]{1})$/;
      if (re.test(num)) {
        num += ".00";
      }
      if (re2.test(num)) {
        num += "0";
      }
      return num;
    },
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      if (this.token && Object.keys(this.user_info).length > 0) {
        let result = await getMemberInfo(this.user_info.id);
        if (result && result.data && result.data.code == 200) {
          this.memberDiscount = result.data.data;
        } else {
          this.$Message.error(this.$t("locale.pc.index.t9"));
        }
      }

      this.SET_IS_LOADING(false);
    },
    async getRecCourse() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 4,
        sort: "sortIndex desc",
        isRec: 1
      };
      let result = await getCourse(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.courseList = result.data.data.rows;
      } else {
        this.SET_IS_LOADING(false);
        this.$Message.error(
          this.$t("locale.pc.mytest.testTrain.t25") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    async getData() {
      this.SET_IS_LOADING(true);
      let result = await getCourseCombo(this.comboId);
      if (result && result.data && result.data.code) {
        this.course_combo = result.data.data;
      } else {
        this.$Message.error(this.$t("locale.pc.index.t9"));
      }
      this.SET_IS_LOADING(false);
    }
  }
};
</script>
<style lang="scss" scoped>
.page-combo-detail {
  width: 1200px;
  margin: 0 auto;
  padding: 60px 0;
  .combo-info {
    background-color: #ffffff;
    width: 1200px;
    height: 400px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 65px;
    .combo-left {
      width: 450px;
      height: 300px;
      background-image: linear-gradient(-45deg, #4cb3f7 0%, #4fdfdf 100%),
        linear-gradient(#dfe1e6, #dfe1e6);
      background-blend-mode: normal, normal;
      border-radius: 2px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .combo-right {
      width: 570px;
      height: 300px;
      .combo-name {
        font-size: 22px;
        font-weight: bold;
        line-height: 30px;
        height: 60px;
        padding: 10px 0;
        color: #43474c;
      }
      .combo-time {
        font-size: 14px;
        font-weight: bold;
        line-height: 14px;
        color: #aaadb3;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .combo-desc {
        border-bottom: 1px solid #e9ebf0;
        .desc-title {
          font-size: 14px;
          font-weight: bold;
          line-height: 30px;
          color: #43474c;
        }
        .desc-content {
          text-indent: 28px;
          font-size: 14px;
          line-height: 20px;
          font-weight: bold;
          color: #5a5f66;
          height: 100px;
          display: -webkit-box;
          -webkit-line-clamp: 5;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
        }
      }
      .price-content {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-size: 18px;
        padding: 20px 0;
        .old-price {
          text-decoration: line-through;
          font-size: 18px;
          font-weight: bold;
          // line-height: 30px;
          color: #c4c7cc;
        }
        .price-right {
          color: #ff8a8a;
          display: flex;
          height: 40px;
          .new-price {
            font-size: 30px;
          }
          .buy-btn {
            margin-left: 20px;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: var(--theme-color);
            color: #ffffff;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
          }
        }
      }
    }
  }
  .combo-course {
    width: 1200px;
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    .combo-left {
      width: 860px;
      .title {
        width: 100%;
        padding: 0 66px;
        height: 66px;
        line-height: 66px;
        border-bottom: 1px solid #edf2fa;
        background-color: #ffffff;
        font-size: 18px;
        font-weight: bold;
        color: #757980;
      }
      .course {
        width: 100%;
        height: 220px;
        background-color: #ffffff;
        margin-bottom: 20px;
        padding: 0 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        .course-icon {
          width: 220px;
          height: 150px;
          background-image: linear-gradient(-45deg, #54d6a3 0%, #68ddbd 100%),
            linear-gradient(#5b96ff, #5b96ff);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            display: block;
          }
        }
        .course-info {
          width: 480px;
          height: 150px;
          .course-name {
            margin: 0 0 10px;
            font-size: 20px;
            font-weight: bold;
            line-height: 26px;
            height: 52px;
            color: #46484d;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
          }
          .course-desc {
            font-size: 16px;
            font-weight: bold;
            line-height: 22px;
            height: 44px;
            margin-bottom: 10px;
            color: #858e99;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
          }
          .price {
            font-size: 16px;
            font-weight: bold;
            line-height: 22px;
            color: #858e99;
            text-decoration: line-through;
          }
        }
      }
    }
    .combo-right {
      width: 306px;
      background-color: #ffffff;
      .hot-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #edf2fa;
        padding: 0 27px;
        height: 66px;
        .hot-left {
          color: var(--theme-color);
          font-size: 16px;
          font-weight: bold;
        }
        .hot-right {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: bold;
          color: #aaadb3;
          cursor: pointer;
        }
        .hot-right:hover {
          color: var(--theme-color);
        }
      }
      .hot-course {
        width: 100%;
        height: 267px;
        padding: 20px 27px;
        background-color: #ffffff;
        border-bottom: 1px solid #edf2fa;
        cursor: pointer;
        img {
          width: 100%;
          height: 139px;
          display: block;
          background-color: var(--theme-color);
        }
        .course-name {
          margin: 10px 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          font-size: 14px;
          font-weight: bold;
          line-height: 18px;
          height: 36px;
          color: #494a4d;
        }
        .teacher{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .teacher-left{
            font-size: 12px;
            font-weight: bold;
            color: #a3a9b2;
            .teacher-name{
              color: #757980;
            }
          }
          .teacher-right{
            width: 32px;
            height: 32px;
            background-color: var(--theme-color);
            border-radius: 50%;
            overflow: hidden;
            img{
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        &:last-child {
          border: none;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.page-combo-detail {
  .ivu-breadcrumb {
    font-size: 20px;
  }
}
</style>
